//项目根组件
import { useState,useRef } from "react";
import './App.scss'
import avatar from './images/bilibil.png'
//引入lodash
import _ from 'lodash'
//引入classNames
import classNames from "classnames";
//引入uuid
import { v4 as uuidV4 } from 'uuid'
//引入dayjs
import dayjs from "dayjs";
// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 89,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}
// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

function App() {
  const inputRef=useRef(null)
  //存储评论内容
  const [comment, setComment] = useState('')
  // 评论列表
  const [commentList, setCommentList] = useState(_.orderBy(defaultList, 'like', 'desc'))
  //删除
  function handleDel(id) {
    setCommentList(commentList.filter(item => item.rpid !== id))
  }
  //记录type
  const [type, setType] = useState('hot')
  //tab切换
  function handleTabChange(type) {
    //记录当前点击的type值
    setType(type)
    //基于type对列表的排序。调用lodah库函数
    if (type === 'hot') {
      //_.orderBy()第一个参数是需要排序的原数据，第二个参数是根据哪个字段排序，第三个参数是升序还是倒序排
      setCommentList(_.orderBy(commentList, 'like', 'desc'))
    } else {
      //根据创建时间排序
      setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
    }

  }
  //发布按钮回调
  function handlePublish() {
    setCommentList([

      {
        rpid: uuidV4(),//随机id
        user: {
          uid: '30009257',
          avatar,
          uname: '黑马前端',
        },
        content: comment,
        ctime: dayjs(new Date()).format('MM-DD HH:ss'),
        like: 66,
      },
      ...commentList,
    ])
    setComment('')
    inputRef.current.focus()
  }
  return (
    <>
      <div className="app">
        {/* 导航 Tab */}
        <div className="reply-navigation">
          <ul className="nav-bar">
            <li className="nav-title">
              <span className="nav-title-text">评论</span>
              {/* 评论数量 */}
              <span className="total-reply">{10}</span>
            </li>
            <li className="nav-sort">
              {/* 高亮类名： active */}
              {tabs.map(tab => (
                <span key={tab.type}
                  // className={`nav-item ${type === tab.type && 'active'}`}
                  className={classNames('nav-item', { active: type === tab.type })}
                  onClick={() => handleTabChange(tab.type)}>{tab.text}</span>
              ))}
            </li>
          </ul>
        </div>

        <div className="reply-wrap">
          {/* 发表评论 */}
          <div className="box-normal">
            {/* 当前用户头像 */}
            <div className="reply-box-avatar">
              <div className="bili-avatar">
                <img className="bili-avatar-img" src={avatar} alt="用户头像" />
              </div>
            </div>
            <div className="reply-box-wrap">
              {/* 评论框 */}
              <textarea
                className="reply-box-textarea"
                placeholder="发一条友善的评论"
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                ref={inputRef}
              />
              {/* 发布按钮 */}
              <div className="reply-box-send">
                <div className="send-text" onClick={handlePublish}>发布</div>
              </div>
            </div>
          </div>
          {/* 评论列表 */}
          <div className="reply-list">
            {/* 评论项 */}
            {commentList.map(comment => (
              <div key={comment.rpid} className="reply-item">
                {/* 头像 */}
                <div className="root-reply-avatar">
                  <div className="bili-avatar">
                    <img
                      className="bili-avatar-img"
                      src="{comment.user.avatar}"
                      alt=""
                    />
                  </div>
                </div>

                <div className="content-wrap">
                  {/* 用户名 */}
                  <div className="user-info">
                    <div className="user-name">{comment.user.uname}</div>
                  </div>
                  {/* 评论内容 */}
                  <div className="root-reply">
                    <span className="reply-content">{comment.content}</span>
                    <div className="reply-info">
                      {/* 评论时间 */}
                      <span className="reply-time">{comment.ctime}</span>
                      {/* 评论数量 */}
                      <span className="reply-time">点赞数:{comment.like}</span>
                      {/* 只有当前用户id===当前评论的id才能显示删除 */}
                      {user.uid === comment.user.uid && <span className="delete-btn" onClick={() => handleDel(comment.rpid)}>
                        删除
                      </span>
                      }

                    </div>
                  </div>
                </div>
              </div>))}

          </div>
        </div>
      </div>
    </>
  );
}

export default App;
